<template>
  <div class="cust">
    <!-- 客户列表页面 -->
    <!-- 书写标题头 -->
    <div class="cust_title">
      <span class="one" @click="fanhui">&lt;</span>
      <span>客户列表信息</span>
      <span @click="addCust">新增</span>
    </div>
    <!-- 书写搜索框 -->
    <van-search
      v-model="CustValue"
      show-action
      placeholder="快递单号"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 主体列表部分 -->
    <ul class="ul1">
      <li class="li1" v-for="(item, index) in records" :key="index">
        <div class="cont_info" @click="tiaozhuan(item.id)">
          <ul>
            <li>
              <span>客户名称</span>
              <span>{{ item.custName }}</span>
            </li>
            <li>
              <span>联系方式</span>
              <span>{{ item.telephone }}</span>
            </li>
            <li>
              <span>公司名称</span>
              <span>{{ item.company }}</span>
            </li>
            <li>
              <span>职务</span>
              <span>{{ item.position }}</span>
            </li>
          </ul>
        </div>
        <div class="btn_sty">
          <van-button round type="info" size="small" color="#003399"
            >新增拜访</van-button
          >
          <van-button round type="info" size="small" color="#003399"
            >拜访记录</van-button
          >
        </div>
      </li>
    </ul>
    <!-- 跳转到的客户视图界面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { GetCustList } from "@/request/api";
export default {
  data() {
    return {
      CustValue: "",
      records: [],
    };
  },
  created() {
    //   发送客户列表信息的请求
    GetCustList({
      keyword: "",
      current: 1,
      size: 3,
    }).then((res) => {
      //   console.log(res.data);
      this.records = res.data.records;
    });
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    onSearch() {
      //   发送客户列表信息的请求,搜索功能
      GetCustList({
        keyword: this.CustValue,
        current: 1,
        size: 5,
      }).then((res) => {
        console.log(res.data);
        this.records = res.data.records;
      });
    },
    // 点击跳转到客户视图界面
    tiaozhuan(val) {
      this.$router.push("/cust/custwatch?id=" + val);
    },
    addCust() {
      this.$router.push("/cust/custaddinfo");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.cust {
  .cust_title {
    width: 100%;
    height: 0.6rem;
    background-color: #003399;
    color: white;
    padding: 0.3rem 0.2rem 0.1rem;
    box-sizing: border-box;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
  }
  .ul1 {
    width: 100%;
    .li1 {
      width: 100%;
      padding: 0 0.2rem;
      background-color: white;
      margin-top: 0.1rem;
      box-sizing: border-box;
      .cont_info {
        padding: 0.1rem 0;
        border-bottom: 1px solid #ccc;
        ul {
          li {
            line-height: 0.18rem;
            span {
              &:first-child {
                color: #aaa;
                margin-right: 0.2rem;
              }
            }
          }
        }
      }
      .btn_sty {
        padding: 0.1rem 0;
        overflow: hidden;
        .van-button {
          float: right;
          margin-left: 0.2rem;
        }
      }
    }
  }
}
</style>